<template>
  <div class="mod-prod-prodComm">
    <el-row>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>总销售额</div>
          <div class="main-col">{{dataInfo.total ? dataInfo.total : 0}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>平台抽成</div>
          <div class="main-col">{{dataInfo.platform_commission ? dataInfo.platform_commission : 0}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>实际总销售额</div>
          <div class="main-col">{{dataInfo.actual ? dataInfo.actual : 0}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>所有订单数量</div>
          <div class="info-col">{{dataInfo.allCount}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>成功</div>
          <div class="success-col">{{dataInfo.success}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="card-col">
        <div class="card-wrap">
          <div>失败</div>
          <div class="danger-col">{{dataInfo.close}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="card-col">
        <div class="card-wrap">
          <div>待付款</div>
          <div class="warning-col">{{dataInfo.unPay}}</div>
        </div>
      </el-col>
      <el-col :span="6" class="card-col">
        <div class="card-wrap">
          <div>待发货</div>
          <div class="warning-col">{{dataInfo.payed}}</div>
        </div>
      </el-col>
      <el-col :span="6" class="card-col">
        <div class="card-wrap">
          <div>待收货</div>
          <div class="warning-col">{{dataInfo.consignment}}</div>
        </div>
      </el-col>
      <el-col :span="6" class="card-col">
        <div class="card-wrap">
          <div>待评价</div>
          <div class="warning-col">{{dataInfo.confirm}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataInfo: {},
    }
  },
  created () {
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getDataList (page, params) {
      this.$http({
        url: this.$http.adornUrl('/data/admin/order/info'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataInfo = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .card-col{
    line-height: 50px;
    font-size: 20px;
    text-align: center;
  }
  .card-wrap{
    margin: 0 20px 20px;
    padding: 20px 0;
    border: 1px solid #DCDFE6;
    border-radius: 10px;
  }
  .success-col{
    color: #67C23A;
  }
  .warning-col{
    color: #E6A23C;
  }
  .danger-col{
    color: #F56C6C;
  }
  .info-col{
    color: #909399;
  }
  .main-col{
    color: #303133;
  }
</style>
